/**
 * 全局SVG图标配置
 * 提供统一的SVG图标管理和使用方法
 */

// SVG图标注册表
export const SVG_ICONS = {
  // 商城相关图标
  shop: {
    cart: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12L8.1 13h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>`,

    bag: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M18 6h-2c0-2.21-1.79-4-4-4S8 3.79 8 6H6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-8 4c0 .55-.45 1-1 1s-1-.45-1-1V8h2v2zm2-6c1.1 0 2 .9 2 2h-4c0-1.1.9-2 2-2zm4 6c0 .55-.45 1-1 1s-1-.45-1-1V8h2v2z"/></svg>`,

    store: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M20 4H4v2h16V4zm1 10v-2l-1-5H4l-1 5v2h1v6h10v-6h4v6h2v-6h1zm-9 4H6v-4h6v4z"/></svg>`,

    product: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-0.01L12 2z"/></svg>`,
  },

  // 用户相关图标
  user: {
    user: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>`,

    login: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M11 7L9.6 8.4l2.6 2.6H2v2h10.2l-2.6 2.6L11 17l5-5-5-5zm9 12h-8v2h8c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-8v2h8v14z"/></svg>`,

    logout: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5-5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z"/></svg>`,
  },

  // 操作相关图标
  action: {
    search: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>`,

    heart: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>`,

    cart: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12L8.1 13h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>`,

    home: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>`,

    settings: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm7-7H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-8.5 7.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5.67-1.5 1.5-1.5 1.5.67 1.5 1.5zM12 8c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3z"/></svg>`,
  },

  // 导航相关图标
  navigation: {
    arrowLeft: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>`,

    arrowRight: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>`,

    close: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>`,

    back: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>`,
  },

  // 状态相关图标
  status: {
    success: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>`,

    warning: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2V7h2v7z"/></svg>`,

    error: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>`,

    info: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>`,
  },
}

/**
 * 获取SVG图标
 * @param {string} category - 图标分类
 * @param {string} name - 图标名称
 * @returns {string} SVG字符串
 */
export const getSvgIcon = (category, name) => {
  return SVG_ICONS[category]?.[name] || ''
}

/**
 * 创建SVG图标组件
 * @param {string} svg - SVG字符串
 * @param {Object} options - 配置选项
 * @returns {Object} 图标组件配置
 */
export const createSvgIcon = (svg, options = {}) => {
  const { size = 24, color = 'currentColor', className = '', style = {} } = options

  const processedSvg = svg
    .replace(/width="[^"]*"/, `width="${size}"`)
    .replace(/height="[^"]*"/, `height="${size}"`)
    .replace(/fill="[^"]*"/, `fill="${color}"`)

  return {
    template: processedSvg,
    class: className,
    style: {
      display: 'inline-block',
      verticalAlign: 'middle',
      ...style,
    },
  }
}

/**
 * 注册所有SVG图标到全局
 * 在main.js中使用
 */
export const registerSvgIcons = app => {
  // 注册全局属性
  app.config.globalProperties.$svgIcons = SVG_ICONS

  // 注册全局方法
  app.config.globalProperties.$getSvgIcon = getSvgIcon
  app.config.globalProperties.$createSvgIcon = createSvgIcon
}

// 导出常用的图标组合
export const ICONS = {
  // 商城图标
  SHOP_CART: SVG_ICONS.shop.cart,
  SHOP_BAG: SVG_ICONS.shop.bag,
  SHOP_STORE: SVG_ICONS.shop.store,
  SHOP_PRODUCT: SVG_ICONS.shop.product,

  // 用户图标
  USER_LOGIN: SVG_ICONS.user.login,
  USER_LOGOUT: SVG_ICONS.user.logout,
  USER_PROFILE: SVG_ICONS.user.user,

  // 通用图标
  SEARCH: SVG_ICONS.action.search,
  HEART: SVG_ICONS.action.heart,
  HOME: SVG_ICONS.action.home,
  SETTINGS: SVG_ICONS.action.settings,
  CLOSE: SVG_ICONS.navigation.close,
  ARROW_LEFT: SVG_ICONS.navigation.arrowLeft,
  ARROW_RIGHT: SVG_ICONS.navigation.arrowRight,
  SUCCESS: SVG_ICONS.status.success,
  WARNING: SVG_ICONS.status.warning,
  ERROR: SVG_ICONS.status.error,
  INFO: SVG_ICONS.status.info,
}

/**
 * 使用示例
 *
 * 在组件中使用：
 * import { getSvgIcon, createSvgIcon, ICONS } from '@/utils/svgConfig'
 *
 * // 直接获取SVG字符串
 * const cartIcon = getSvgIcon('shop', 'cart')
 *
 * // 创建图标组件
 * const icon = createSvgIcon(ICONS.SHOP_CART, { size: 32, color: '#ff6b6b' })
 *
 * 在模板中使用：
 * <div v-html="$getSvgIcon('shop', 'cart')"></div>
 *
 * 全局注册后：
 * // 在main.js中
 * import { registerSvgIcons } from '@/utils/svgConfig'
 * registerSvgIcons(app)
 */
